<template>
	<view class="userPlane">
		<view class="userplane-second">
			<view class="userplane-address-icon">
				<image class="userplane-address-icon"></image>
			</view>
			<view style="flex: 1 1 0%;">
				<view class="blackMediaFont" style="display: flex;">
					<view class="userPlane-name">{{consignee}}</view>
					<view class="userPlane-phone">{{mobile}}</view>
				</view>
				<view class="userplane-address">{{address}}</view>
			</view>
			<view class="userplane-address-icon arrow" @click="handleAddress">
				<image class="userplane-address-icon arrow"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		mobile:{
			type: String,
			default: ''
		},
		consignee:{
			type: String,
			default: ''
		},
		address:{
			type: String,
			default: ''
		}
	},
	methods:{
		handleAddress(){
			// 地址管理界面
			uni.navigateTo({
				url:'/pages/personal/subpage/address/index'
			})
		}
	}
}	
</script>

<style lang="less">
.userPlane{
	background: #fff;
	padding: 19px 14px 14px 14px;
	margin-bottom: 9px;
	margin-top: 9px;
	/* box-shadow: rgba(150, 148, 147, 0.3) 0px 0px 10px; */
	border-radius: 5px;
	margin-left: 14px;
	margin-right: 14px;
}
.userplane-second {
    margin-bottom: 9px;
    margin-top: 4px;
    display: flex;
    align-items: center;
}
.userplane-address-icon {
    width: 19px;
    height: 19px;
    margin-right: 7px;
	background-position: 0% 0%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
    background-image: url('~@/static/destinationactive_3x.png');
}
.userplane-address-icon.arrow {
    width: 11px;
    height: 14px;
    margin-right: 0px;
	background-position: 0% 0%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: url('~@/static/arrow.png');
}
.blackMediaFont{
    color: #000;
    font-size: 13px;
}
.userplane-address{
    font-size: 13px;
    line-height: 19px;
    color: #888;
}
.userPlane-name{
    color: #000;
    font-size: 18px;
    margin-right: 19px;
}
.userPlane-phone {
    color: #000;
    font-size: 15px;
}
</style>
